<template>
  <div>
    <div ref="gantt" style="height: 80vh;"></div>
  </div>
</template>
  
<script>
import { gantt } from 'dhtmlx-gantt'
export default {
  mounted() {
    this.$nextTick(() => {
      this.InitGantt();
    })
  },
  methods: {
    InitGantt() {

      //设置中文
      gantt.i18n.setLocale('cn');

      gantt.config.grid_width = 350
      gantt.config.add_column = false //添加符号
      gantt.config.autosize = true//自适应尺寸
      gantt.config.autofit = true// 表格列宽自适应
      gantt.config.autoscroll = true// 把任务或者连线拖拽到浏览器屏幕外时，自动触发滚动效果
      gantt.config.drag_progress = false//取消任务进度条进度拖动
      gantt.config.scale_height = 60
      gantt.config.row_height = 50
      gantt.config.bar_height = 25
      gantt.config.readonly = true //只读
      gantt.config.show_grid = true //是否隐藏左侧表格
      gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
      gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
      //时间栏配置
      gantt.config.scales = [
        { unit: 'month', step: 1, format: '%Y年%m月' },
        { unit: 'day', step: 1, format: '%m-%d' },
      ]
      // 格式化日期
      gantt.locale.date = {
            month_full: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            day_short: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
        }
      gantt.config.columns = [
        { name: 'text', align: 'left', label: '任务名称',  tree: true, width: '*' },
        { name: 'start_date', align: 'center', label: '开始时间', width: '*' },
        { name: 'duration', align: 'center', label: '持续时间', width: '*' },
        {
          name: "progress", label: "进度", align: 'center', width: 80, template: function (task) {
            return `${task.progress*100}%`
          }
        }
      ]

      gantt.init(this.$refs.gantt);
      //设置数据
      gantt.parse({
        data: this.ganttData,
        links:[
          {id:1,source:1,target:3,type:'1'}
        ]
      });

      //鼠标移入弹框
      gantt.templates.tooltip_text = function (start, end, task) {
        return `
        <div style="width: 200px;height: 200px;">
                  <p>任务名称：这是一个任务</p>
                  <p>任务策划：张三</p>
                  <p>当前状态：进行中</p>
                  <p>开始时间：2020-12-11</p>
                  <p>结束时间：2021-04-13</p>
          </div>
        `
      };

      //更改父项图标
      gantt.templates.grid_folder = (item) => {
        return ""
      }
      // gantt.plugins({
      //   marker: true
      // });
      // var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
      // var today = new Date();
      // gantt.addMarker({
      //   start_date: today,
      //   css: "today",
      //   text: "今天",
      //   title: "今天: " + date_to_str(today)
      // });
      //更改子项图标
      gantt.templates.grid_file = (item) => {
        return ""
      }
      //任务条显示内容
      gantt.templates.task_text = function (start, end, task) {
        return `<div style="color:#454545;font-size:14px;font-weight:700;">执行：${task.text}</div>`
      }


      //任务条左侧配置
      // gantt.templates.leftside_text = function (start, end, task) {
      //   return `<div class="jindu" style="width:100%;height:30px;background-color:#e6f4ff;padding-left:10px;font-size:13px;color:#629eff;"><span>当前进度${(task.progress * 100).toFixed(0)}%</span></div>`;
      // };
      //展开树图标
      gantt.templates.grid_open = function (item) {
        return `<i style="font-size:14px;background:none; color:#1890ff;" class="gantt_tree_icon gantt_${item.$open ? "close" : "open"}    ${item.$open ? 'el-icon-caret-top' : 'el-icon-caret-bottom'}"></i>`
      };

      //双击事件
      gantt.attachEvent("onTaskDblClick", function (id, e) {
        // 在这里编写处理双击事件的代码
        console.log("双击了任务：" + id);
      });

    }
  },
  data() {
    return {


      /**
        id：任务标识，可用来标识父子关系、连接links等
        start_date,end_date：项目开始截至时间 Date|string //（‘14-07-2022’）
        text：文本，任务的显示文字
        progress：项目的进度，用颜色深浅显示
        parent：父子关系(id标识)；子任务的parent为父任务的id
        type：任务类型，有三种，object，task，milestone；
        object：没有时间限制，长度为包含所有子任务的长度
        task：普通任务
        milestone：菱形块，可表示中转关系
       */
      //数据
      ganttData: [
        { id: 1, text: '任务1', start_date: new Date('2024/04/29'), type: 'task', duration: 5, progress: 0.6, color: '#f2e6c2'},
        { id: 2, text: '任务2', start_date: new Date('2024/04/29'), duration: 3, progress: 0.4, color: '#b5e09b' },
        { id: 3,parent:'1', text: '任务2', start_date: new Date('2024/04/29'), duration: 3, progress: 0.4, color: '#b5e09b' },
      ]
    };
  }
}
</script>
<style scoped>
@import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
</style>

